<template>
  <!-- 登录表单的容器 -->
  <div class="login_container">
    <!-- 登录区域 -->
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img :src="image" alt />
      </div>
      <!-- 表单 -->
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login_form">
        <!-- 登录验证项:身份 -->
        <el-form-item prop="type">
          <el-radio-group class="identity" fill="#67C23A" v-model="loginForm.type">
            <el-radio-button label="1">学生</el-radio-button>
            <el-radio-button label="2">教师</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!-- 登录验证项:学号/工号 -->
        <el-form-item prop="id">
          <el-input
            v-model="loginForm.id"
            oninput="value=value.replace(/[^\d]/g,'')"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入学号或工号"
          ></el-input>
        </el-form-item>
        <!-- 登录验证项:密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            show-password
            placeholder="请输入密码"
            prefix-icon="el-icon-unlock"
          ></el-input>
        </el-form-item>
        <!-- 登录/注册按钮 -->
        <el-form-item class="login-btn">
          <el-button id="login-btn" type="primary" @click="submitForm('loginForm')">登录</el-button>
          <el-button id="reset-btn" @click="show">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Register
      :addOrUpdateVisible="addOrUpdateVisible"
      @changeShow="showAddOrUpdate"
      ref="addOrUpdateRef"
    ></Register>
  </div>
</template>

<script>
import Register from "./Register";
import { login } from "@/api/user";
import { getCurrentUser } from "@/api/user";
import { createNamespacedHelpers } from "vuex";
const { mapActions:userMapActions } = createNamespacedHelpers("user");
export default {
  name: "Login",
  // 变量域
  data() {
    return {
      loginForm: {
        id: "",
        password: "",
        type: "1"
      },
      image:
        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3857377881,4096200583&fm=26&gp=0.jpg",
      // 弹窗控制键
      addOrUpdateVisible: false,
      loginRules: {
        id: [
          { required: true, message: "请输入您的学号或工号", trigger: "blur" },
          { min: 6, max: 14, message: "长度在 6 到 14 个字符", trigger: "blur" }
        ],
        password: [
          {
            required: true,
            message: "请输入登录密码",
            trigger: ["blur", "change"]
          },
          { min: 6, max: 14, message: "长度在 6 到 14 个字符", trigger: "blur" }
        ],
        type: [
          { required: true, message: "点击按钮选择您的身份", trigger: "blur" }
        ]
      }
    };
  },
  // 计算属性域
  computed: {
    userType() {
      return this.loginForm.type;
    },
  },
  // 监听域
  watch: {
    userType(newVal, oldVal) {
      if (newVal == 1) {
        this.image =
          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3857377881,4096200583&fm=26&gp=0.jpg";
      } else {
        this.image =
          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2957226749,2375869085&fm=26&gp=0.jpg";
      }
    }
  },
  // 方法域
  methods: {
    // 登录提交
    async loginInfoPost() {
      var _this = this;
      const { data: res } = await login(
        this.loginForm.id,
        this.loginForm.password,
        this.loginForm.type
      );

      if (res.code == 20000) {
        this.$notify.success({
          title: "操作成功",
          message: "登录成功"
        });
        const { data: currentUserData } = await getCurrentUser(
          this.loginForm.type,
          this.loginForm.id
        );
        _this.$store.commit("login", _this.loginForm);
        this.$store.commit("login", currentUserData.data.user);
        this.$router.push({
          path: "/main"
        });
      } else {
        return this.$message.error("登录失败:" + res.message);
      }
    },
    // 提交表单
    submitForm(loginForm) {
      this.$refs[loginForm].validate(valid => {
        if (valid) {
          this.loginInfoPost();
        } else {
          this.$notify.error("请检查所填信息!!");
          return false;
        }
      });
    },
    // 从后台接受当前用户信息
    async setSessionStorage() {},
    // 重置表单内容
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
    // 显示弹框
    show() {
      this.addOrUpdateVisible = true;
    },
    // 监听子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      if (data === "false") {
        this.addOrUpdateVisible = false;
      } else {
        this.addOrUpdateVisible = true;
      }
    },
    ...userMapActions(["getUser"])
  },
  // 组件注册
  components: {
    Register
  }
};
</script>

<style lang="scss" scpoed>
.login_container {
  height: 100%;
  background-color: aquamarine;

  .login_box {
    width: 450px;
    height: 380px;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: -65px auto;
    background-color: #ffffff;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eeeeee;
  }
}
.identity {
  display: flex;
  label {
    width: 50%;
    span {
      width: 100%;
    }
  }
}
.login_form {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
  .login-btn {
    .el-form-item__content {
      display: flex;
      justify-content: space-between;
      #login-btn {
        width: 70%;
      }
      #reset-btn {
        width: 30%;
      }
    }
  }
  .verifyCode_box {
    display: flex;
    .verify_code {
      width: 70%;
      justify-content: left;
    }
    .verify_img {
      justify-content: flex-end;
      background-size: contain;
      width: 30%;
    }
  }
}
</style>
